import Icon, * as AntdIcons from '@ant-design/icons-vue'
import { categories } from './fields'
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons'
import Category from './Category'
import { defineComponent } from 'vue'
import "./style/index.less"

const ThemeType = {
  Filled: 'Filled',
  Outlined: 'Outlined',
  TwoTone: 'TwoTone'
}

const allIcons = AntdIcons

const IconDisplay = defineComponent({
  cagetories: categories,
  newIconNames: [],
  data() {
    return {
      theme: ThemeType.Outlined
    }
  },
  methods: {
    handleChangeTheme(e) {
      this.theme = e.target.value
    },

    renderCategories() {
      const { theme } = this

      return Object.keys(categories)
        .map(key => {
          let iconList = categories[key]

          return {
            category: key,
            icons: iconList
              .map(iconName => iconName + theme)
              .filter(iconName => allIcons[iconName])
          }
        })
        .filter(({ icons }) => !!icons.length)
        .map(({ category, icons }) => (
          <Category
            key={category}
            title={category}
            theme={theme}
            icons={icons}
            newIcons={IconDisplay.newIconNames}
          />
        ))
    }
  },

  render() {
    return (
      <div>
        <h3>选择图标主题风格</h3>
        <z-radio-group value={this.theme} onChange={this.handleChangeTheme}>
          <z-radio-button value={ThemeType.Outlined}>
            <Icon component={OutlinedIcon} /> 线框风格
          </z-radio-button>
          <z-radio-button value={ThemeType.Filled}>
            <Icon component={FilledIcon} /> 实底风格
          </z-radio-button>
          <z-radio-button value={ThemeType.TwoTone}>
            <Icon component={TwoToneIcon} /> 双色风格
          </z-radio-button>
        </z-radio-group>
        {this.renderCategories()}
      </div>
    )
  }
})

export default IconDisplay
